<template>
  <div class="wrapper">
    <Header :title="title" :back="back"></Header>
    <div class="section" v-show="showUpdatePassword">
      <p v-show="showTishi">{{ tishi }}</p>
      <input type="hidden" v-model="userName">
      <ul>
        <li>
          <span><img src="../../assets/password.png" width="15px"/></span>
          <input type="password" class="input" placeholder="请输入旧密码" v-model="oldPassword">
        </li>
        <li style="height: 10px;background: #f6f6f6"></li>
        <li>
          <span><img src="../../assets/password.png" width="15px"/></span>
          <input type="password" class="input" placeholder="请输入新密码" v-model="password1">

        </li>
        <li>
          <span><img src="../../assets/password.png" width="15px"/></span>
          <input type="password" class="input" placeholder="确认新密码" v-model="password2">

        </li>
      </ul>
    </div>
    <button v-on:click="upatePassword" class="button1">确认修改</button>
  </div>
</template>

<script>
import {setCookie, getCookie, delCookie} from '../../assets/js/cookie.js'
import {nemoMD5} from "../../assets/js/md5.js"
import Header from "../header/header";
import qs from "qs";

export default {
  name: 'UpdatePassword',
  components: {Header},
  data() {
    return {
      uname: '',
      userName: '',
      oldPassword: '',
      // password: '',
      password1: '',
      password2: '',
      showTishi: '',
      tishi: '',
      showUpdatePassword: true,
      title: "修改密码",
      back: "/words"

    }
  },
  methods: {
    clear() {
      this.uname = ""
      this.userName = ""
      this.oldPassword = ''
      this.password1 = ''
      this.password2 = ''
    },
    upatePassword() {
      if (this.oldPassword == "") {
        alert("旧密码不能为空")
      } else if (this.password1 == "" || this.password2 == "") {
        alert("新密码确认密码不能为空")
      } else {
        if (this.password1 != this.password2) {
          alert("两次输入密码不一致, 请重新输入!")
          this.clear()
          event.preventDefault()
          return;
        } else {
          let oldpwd = nemoMD5(this.oldPassword);
          let pwd = nemoMD5(this.password1);
          this.axios.post("updatePass", qs.stringify({
            username: this.uname,
            oldPassword: oldpwd,
            password: pwd
          })).then((res) => {
            let data = res.data;
            if (data.flag === "false") {
              alert(data.msg)
              this.clear()
            } else {
              alert(data.msg)
              this.$router.push('/')
            }
          })
        }
      }
    }
  },
  mounted() {
    if (getCookie('userName')) {
      this.uname = getCookie('userName')
      console.log(this.uname)
    }
  }
}
</script>

<style scoped>
.wrapper {
  margin-top: 55px;
}

.button1 {
  border: 0;
  background: #41b883;
  border-radius: 3px;
  height: 42px;
  width: calc(100% - 66px);
  margin: 80% 33px 10% 33px;
  font-size: 16px;
  font-weight: bold;

  color: #ffffff;
}

.section {
  background: #ffffff;
}

.section li {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px #eee solid;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0 23px;
}

.section input {
  border: none;
  margin-left: 16px;
  font-size: 14px;
}

</style>
